.fixedTop {
  @apply box-border fixed left-0 right-0 top-0 z-50;
  .fuckNav {
    @apply box-border flex flex-row items-center px-[32px];
  }
  .iconLocation {
    transform: translateY(3px);
    @apply w-36px h-36px object-center block;
  }
  .fuckTitle {
    color: #333333;
    font-size: 32px;
    font-weight: 600;
    margin-left: 4px;
    margin-right: 8px;
  }
}
.searhWrapper {
  @apply w-page px-[32px] py-[32px] box-border;
  .searchInput {
    height: 80px;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.6);
    grid-template-columns: 68px auto;
    align-items: center;
    @apply grid;
    .input {
      font-size: 28px;
    }
  }
}
.fuckTip {
  --bg: rgba(0, 0, 0, 0.5);
  top: calc(var(--navH) + 40px);
  left: 32px;
  right: 32px;
  @apply absolute;
  &::before {
    content: "";
    border-width: 16px;
    border-color: transparent;
    border-bottom-color: var(--bg);
    border-top-width: 20px;
    border-bottom-width: 20px;
    left: 92rpx;
    top: -40rpx;
    @apply absolute;
  }
  .fuckTipContent {
    background-color: var(--bg);
    @apply relative rounded-50px flex flex-row items-center flex-nowrap py-12px px-24px;
  }
  .fuckTipText {
    line-height: 36px !important;
    @apply text-white text-28px ml-8px;
  }
  .fuckSwitch {
    height: 48px;
    line-height: 48px !important;
    @apply box-border text-white text-24px bg-primary rounded-28px px-24px ml-8px;
  }
  .fuckTipClose {
    background-color: var(--bg);
    @apply box-border w-32px h-32px rounded-full flex flex-row justify-center items-center ml-auto mt-10px;
  }
}
.fuck {
  // background: var(--nav-gradient);
  @apply w-page box-border;
  .fuckFemaleDog {
    height: 296px;
    @apply grid grid-cols-2  pb-[32px] px-[32px] gap-[16px];
    .unknownField {
      border-radius: 16px;
      background: #5177fc;
      padding: 36px 24px 0;
      @apply relative overflow-hidden;
      .unknownFieldTitle {
        color: #f5f5f5;
        font-size: 32px;
        font-weight: 500;
      }
      .unknownFieldDesc {
        margin-top: 24px;
        color: #ffffffcc;
        font-size: 22px;
      }
      .unknownFieldEntry {
        margin-top: 32px;
        color: #355ce6;
        font-size: 24px;
        font-style: normal;
        line-height: 44px;
        height: 44px;
        padding-left: 22px;
        padding-right: 22px;
        display: inline-block;
        border-radius: 40px;
        background: #ffffffe6;
        position: relative;
        z-index: 2;
      }
      .unknownFieldImageWrapper {
        right: 28px;
        bottom: 0;
        z-index: 1;
        @apply absolute;
        .unknownFieldImage {
          width: 128px;
          height: 128px;
          @apply block object-cover;
        }
      }
    }
    .unknownField1 {
      @apply grid grid-rows-2 box-border gap-[16px];
      .guideTwo,
      .guideThree {
        @apply relative box-border rounded-16px;
      }
      .guideTwo {
        background-color: #f9847d;
        .guideTwoTitle {
          @apply text-[#ffffff];
        }
      }
      .guideThree {
        background-color: #fcaa4e;
        .guideTwoTitle {
          @apply text-[#ffffff];
        }
      }
      .guideTwoTitle {
        @apply text-[32px] font-normal font-500 pt-[40px] pl-[24px] box-border;
      }
      .guideTwoImage {
        @apply absolute right-[16px] bottom-0;
        .guideTwoImg {
          width: 96px;
          height: 96px;
          @apply block object-cover;
        }
      }
    }
  }
}
.navigations {
  @apply grid grid-cols-5 box-border px-[32px];
  .navigation {
    @apply flex flex-col gap-[16px] items-center box-border justify-center;
    .navigationIcon {
      width: 68px;
      height: 68px;
      @apply object-cover block;
    }
    .navigationTitle {
      font-size: 26px;
      @apply text-[#333333] font-400;
    }
  }
}
.contentSpecials {
  @apply whitespace-nowrap mt-[48px];
  .contentSpecial {
    @apply inline-block;
    &:first-child {
      @apply pl-[32px];
    }
    .inner {
      width: 312px;
      height: 162px;
      padding-top: 48px;
      background: radial-gradient(102.73% 100.07% at 53.64% 0%, #bfe9fc66 0%, #f7f7f700 100%),
        #f1f5f9;
      @apply block box-border rounded-[16px] mr-[16px];
      .innerTitle {
        @apply text-[#333333] font-600 text-[30px] pl-[16px];
      }
      .innerDesc {
        @apply text-[#999999] text-[24px] font-normal mt-[16px] pl-[24px];
      }
      &.inner_1 {
        .innerTitle {
          border-left: 8px solid #5278fd99;
        }
      }
      &.inner_2 {
        .innerTitle {
          border-left: 8px solid #05d99f99;
        }
      }
      &.inner_3 {
        .innerTitle {
          border-left: 8px solid #9255f899;
        }
      }
      &.inner_4 {
        .innerTitle {
          border-left: 8px solid #f95c0099;
        }
      }
      &.inner_5 {
        .innerTitle {
          border-left: 8px solid #5278fd99;
        }
      }
      &.inner_6 {
        .innerTitle {
          border-left: 8px solid #9255f899;
        }
      }
    }
  }
}
.blockClass {
  @apply mt-[48px];
}
.topicContent {
  @apply relative mx-[32px] box-border;
  .todayTopicRight {
    @apply absolute left-0 right-0 bottom-0 top-0 box-border;
    .todayTopicRightImage {
      width: 686px;
      height: 240px;
      @apply block object-cover;
    }
  }
}
.todayTopic {
  height: 240px;
  @apply box-border relative z-10 pl-[48px] pr-[36px] rounded-[16px] flex flex-row items-center gap-[40px];
  .todayTopicLeft {
    @apply flex-1;
    .todayTopicTitle {
      width: 350px;
      @apply text-[#333333] text-[30px] !leading-[44px] font-normal break-all;
      .todayTopicIcon {
        width: 36px;
        height: 36px;
        @apply block object-cover float-left mr-[8px];
      }
    }
    .topicBtns {
      width: 298px;
      @apply box-border whitespace-nowrap overflow-hidden rounded-[8px] mt-[20px];
      .fuckTopicBtn {
        @apply inline-block;
        &:first-child {
          margin-right: 16px;
          margin-left: -14px;
        }
      }
      .topicBtn {
        width: 156px;
        height: 64px;
        @apply flex flex-row justify-center rounded-[8px] box-border items-center text-[#333333] bg-[#FFFFFF] text-[28px] font-normal justify-center;
        transform: skewX(-30deg);
        .topicBtnText {
          transform: skewX(30deg);
        }
      }
    }
  }
}
.institution {
  @apply whitespace-nowrap box-border;
  .institutionItemWrap {
    @apply inline-block box-border mr-[16px];
    .institutionItem {
      width: 320px;
      @apply box-border bg-[#F1F5F9] rounded-[8px] pb-[24px];
      &:first-child {
        margin-left: 32px;
      }
      .institutionItemImage {
        width: 320px;
        height: 240px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        @apply box-border block;
      }
      .institutionTitle,
      .institutionInfo {
        @apply px-[16px];
      }
      .institutionTitle {
        white-space: normal !important;
        @apply text-[#333333] text-[28px] font-600 mt-[24px];
      }
      .institutionInfo {
        @apply text-[#999999] mt-[16px] text-[24px] font-normal flex flex-row items-center box-border;
      }
    }
  }
}
.newsScroll {
  @apply whitespace-nowrap box-border;
  .newsItemWrap {
    @apply inline-block box-border mr-[12px];
    &:first-child {
      @apply ml-[32px];
    }
    &.newsItem_active {
      .newsItem {
        @apply text-[#FFFFFF] bg-[#5278FD];
      }
    }
    .newsItem {
      height: 56px;
      @apply text-[#666666] rounded-[12px] px-[32px] text-[28px] bg-[#F1F5F9] font-normal flex flex-row justify-center items-center;
    }
  }
}
.newsList {
  @apply px-[32px] box-border;
  .listItem {
    border-bottom: 2px solid #f2f2f2;
    @apply py-[32px] gap-[16px] box-border flex flex-row items-center;
    .listItemImage {
      width: 200px;
      height: 150px;
      @apply rounded-[16px] block flex-none object-cover;
    }
    .listItemInfo {
      align-self: stretch;
      @apply flex flex-col justify-between box-border flex-1;
      .listItemTitle {
        @apply text-[#333333] text-[32px] !leading-[40px];
      }
      .listItemDesc {
        @apply text-[#999999] text-[24px] font-normal flex flex-row justify-between items-center box-border;
      }
    }
  }
}
.noMoreTip {
  @apply text-[#BBBBBB] mt-[48px] text-[24px] font-normal flex justify-center;
}
